<template>
	<view class="content">
		<headerSpaceBetweenVue>
			<template #title>我的文章</template>
		</headerSpaceBetweenVue>
		<view class="artList">
			<myArticle v-for="item in list" :key="item.id" :item="item"></myArticle>
			<uni-load-more :status="hasMore && isLoading ? 'loading' : 'noMore'"></uni-load-more>
		</view>

	</view>
</template>

<script setup>
	import headerSpaceBetweenVue from '@/components/header-space-between/header-space-between.vue';
	import myArticle from "@/components/art-item/my-article.vue"
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {
		apiGetArticleList
	} from '@/api/apis';
	import {
		ref
	} from 'vue';


	let list = ref([])
	let page = ref(1)
	let hasMore = ref(true)
	let isLoading = ref(false)
	onLoad(() => {
		getArticleList()
	})

	const getArticleList = async (query) => {
		await apiGetArticleList(query).then(res => {
			list.value = res.data.data
		})
	}
	onReachBottom(() => {
		if (isLoading.value || !hasMore.value) return
		isLoading.value = true
		page.value = page.value + 1
		apiGetArticleList({
			page: page.value
		}).then(res => {
			if (res.data.data.length > 0) {
				isLoading.value = false
				list.value = [...list.value, ...res.data.data]
				if (!res.data.has_more) hasMore.value = false
			} else {
				hasMore.value = false
				isLoading.value = false
			}
		})

	})
</script>

<style lang="scss" scoped>
	.content {
		position: relative;

		.artList {
			padding-top: calc(var(--status-bar-height) + 90rpx);
		}

		.act-model {
			position: absolute;
			top: 50%;
			width: 100%;
			left: 0;
			right: 0;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>